import L from "leaflet";
import { antPath } from 'leaflet-ant-path';
import 'leaflet-rotatedmarker'
import {car0, car1, car2, car3, car4, car5, car6, car7, car8, car9, nav} from "@/assets/img.js"
 
class AntPathPolyline {
    static polylineStyleConfig = [
      {
        color: "#006600",
        fillColor: "#006600",
        pulseColor: "#e5ffe5"
      },
      {
        color: "#0000cc",
        fillColor: "#0000cc",
        pulseColor: "#ccccff"
      },
      {
        color: "#e62f00",
        fillColor: "#e62f00",
        pulseColor: "#ffc2b3"
      },
      {
        color: "#8600b3",
        fillColor: "#8600b3",
        pulseColor: "#ecb3ff"
      },
      {
        color: "#b35900",
        fillColor: "#b35900",
        pulseColor: "#ffd9b3"
      },
      {
        color: "#ff9900",
        fillColor: "#ff9900",
        pulseColor: "#ffe0b3"
      },
      {
        color: "#00b2b3",
        fillColor: "#00b2b3",
        pulseColor: "#b3ffff"
      },
      {
        color: "#000000",
        fillColor: "#000000",
        pulseColor: "#FFFFFF"
      },
      {
        color: "#006699",
        fillColor: "#006699",
        pulseColor: "#b3e6ff"
      },
      {
        color: "#cc0099",
        fillColor: "#cc0099",
        pulseColor: "#ffb3ec"
      }
    ];
 
    static carIconConfig = [
      car0,
      car1,
      car2,
      car3,
      car4,
      car5,
      car6,
      car7,
      car8,
      car9
    ];
 
    static positionIconConfig = nav;
 
    static layerGroups = {};
 
    // 获取当前位置方向
    static calculateBearing(lat1, lon1, lat2, lon2) {
      const dLon = (lon2 - lon1) * (Math.PI / 180);
      const y = Math.sin(dLon) * Math.cos(lat2 * (Math.PI / 180));
      const x =
        Math.cos(lat1 * (Math.PI / 180)) *
        Math.sin(lat2 * (Math.PI / 180)) -
        Math.sin(lat1 * (Math.PI / 180)) *
        Math.cos(lat2 * (Math.PI / 180)) *
        Math.cos(dLon);
      let bearing = Math.atan2(y, x) * (180 / Math.PI);
 
      // 将方位角规范化为0到360度之间
      if (bearing < 0) {
        bearing = (bearing + 360) % 360;
      }
 
      return bearing;
    }
 
    // 生成随机字符串
    static generateUniqueChar() {
      // 获取当前时间戳，确保每次调用都是唯一的
      const timestamp = new Date().getTime().toString(36);
      // 生成一个随机数，并转换为36进制字符串
      const randomValue = Math.random()
        .toString(36)
        .substr(2, 9);
      // 返回时间戳和随机数的组合，确保唯一性
      return timestamp + randomValue;
    }
 
    drawPolyline(
      map,
      points,
      width,
      polylineStyle,
      carIcon,
      layerGroupName
    ) {
      if (points.length === 0) {
        return;
      }
 
      if (AntPathPolyline.layerGroups[layerGroupName]) {
        map.removeLayer(AntPathPolyline.layerGroups[layerGroupName]);
        AntPathPolyline.layerGroups[layerGroupName] = L.layerGroup().addTo(
          map
        );
      } else {
        AntPathPolyline.layerGroups[layerGroupName] = L.layerGroup().addTo(
          map
        );
      }
 
      // 起始点
      const marker = L.marker(points[0], {
        icon: L.icon({
          iconUrl: AntPathPolyline.positionIconConfig, // 图标图片的URL
          iconSize: [32, 32], // 图标的大小
          iconAnchor: [15, 15], // 图标的锚点，即图标的位置应该放置在地图上的位置
          popupAnchor: [-3, -76] // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
        })
      }).addTo(AntPathPolyline.layerGroups[layerGroupName]);
 
      // 线
      L.polyline
        .antPath(points, {
          ...polylineStyle,
          opacity: 6,
          delay: 10000,
          dashArray: [5, 30]
        })
        .addTo(AntPathPolyline.layerGroups[layerGroupName]);
 
      // 最新的点
      L.marker(points[points.length - 1], {
        icon: L.icon({
          iconUrl: carIcon,
          iconSize: [30, 30], // icon的大小
          iconAnchor: [16, 15], // icon的渲染的位置（相对与marker）
          shadowAnchor: [0, 0], // shadow的渲染的位置（相对于marker）
          popupAnchor: [0, 0] //若是绑定了popup的popup的打开位置（相对于icon）
        }),
        title: "test",
        draggable: true,
        rotationAngle:
          points.length > 1
            ? AntPathPolyline.calculateBearing(
              points[points.length - 2][0],
              points[points.length - 2][1],
              points[points.length - 1][0],
              points[points.length - 1][1]
            )
            : 0
      }).addTo(AntPathPolyline.layerGroups[layerGroupName]);
 
      const circle = L.circle(points[points.length - 1], {
        stroke: true,
        dashArray: "4",
        color: "red",
        fillColor: "#f03",
        fillOpacity: 0.2,
        weight: 2,
        radius: 1200 * width
      }).addTo(AntPathPolyline.layerGroups[layerGroupName]);
 
      circle.on("mouseover", e => {
        alert("半径为0.5km.");
      });
    }
  }
 
  export default AntPathPolyline;